import React, { useState } from 'react';
import { Tabs } from 'antd';
import InterestTags from '../../components/social/InterestTags';
import SocialActions from '../../components/social/SocialActions';
import InterestCircle from '../../components/social/InterestCircle';
import './SocialPage.css';

const { TabPane } = Tabs;

const SocialPage: React.FC = () => {
    const [selectedTags, setSelectedTags] = useState<string[]>([]);

    const handleTagsChange = (tags: string[]) => {
        setSelectedTags(tags);
    };

    const handleFollow = (userId: string) => {
        console.log('关注用户:', userId);
        // TODO: 实现关注功能
    };

    const handleUnfollow = (userId: string) => {
        console.log('取消关注用户:', userId);
        // TODO: 实现取消关注功能
    };

    const handleSendMessage = (userId: string, content: string) => {
        console.log('发送消息给用户:', userId, content);
        // TODO: 实现发送消息功能
    };

    const handleJoinCircle = (circleId: string) => {
        console.log('加入圈子:', circleId);
        // TODO: 实现加入圈子功能
    };

    const handleCreateCircle = (circleData: any) => {
        console.log('创建圈子:', circleData);
        // TODO: 实现创建圈子功能
    };

    return (
        <div className="social-page">
            <Tabs defaultActiveKey="1" className="social-tabs">
                <TabPane tab="兴趣标签" key="1">
                    <InterestTags
                        selectedTags={selectedTags}
                        onTagsChange={handleTagsChange}
                    />
                </TabPane>
                <TabPane tab="社交互动" key="2">
                    <div className="social-interaction">
                        <SocialActions
                            userId="1"
                            isFollowing={false}
                            onFollow={handleFollow}
                            onUnfollow={handleUnfollow}
                            onSendMessage={handleSendMessage}
                        />
                    </div>
                </TabPane>
                <TabPane tab="兴趣圈子" key="3">
                    <InterestCircle
                        onJoinCircle={handleJoinCircle}
                        onCreateCircle={handleCreateCircle}
                    />
                </TabPane>
            </Tabs>
        </div>
    );
};

export default SocialPage; 